<template>
  <div>
     <!-- 黑层 -->
    <div class="Permissiondd" :style="{zIndex: zindex,backgroundColor:whitecolor,display:showd ? 'block':'none'}">
        <span :style="{ display:showd ? 'block':'none'}">🔒权限不足</span>
    </div>
    <div style="width: 100%; display: flex">
      <div style="width: 70%">
        <div>
          <img
            src="../../assets/img/caiwul.png"
            alt=""
            style="width: 100%; height: 150px"
          />
        </div>
        <div style="margin-top: 20px">
          <div style="display: flex">
            <button class="el-icon-s-promotion" @click="jump"></button>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="合同收款" name="first"
              ><div style="width: 100%">
                <el-table
                  :data="flowList"
                  style="width: 100%; font-size: 12px; margin-top: -45px"
                >
                  <el-table-column prop="description" width="600">
                  </el-table-column>
                  <el-table-column prop="name" width="150"> </el-table-column>
                  <el-table-column prop="date"> </el-table-column>
                </el-table></div
            ></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div style="width: 30%; margin-left: 20px">
        <div>
          <img
            src="../../assets/img/caiwur.png"
            alt=""
            style="width: 100%; height: 150px"
          />
        </div>
        <div style="width: 100%; display: flex; flex-wrap: wrap">
          <div style="width: 50%; display: flex">
            <div>
              <img
                src="../../assets/img/caiwu101.png"
                alt=""
                style="width: 100px; height: 100px"
              />
            </div>
            <div style="margin-top: 20px">
              <div style="font-size: 20px; color: rgb(43, 75, 171)">
                7742.30
              </div>
              <div style="margin-top: 10px">万元</div>
              <div>收款金额</div>
            </div>
          </div>
          <div style="width: 50%; display: flex">
            <div>
              <img
                src="../../assets/img/caiwu102.png"
                alt=""
                style="width: 100px; height: 100px"
              />
            </div>
            <div style="margin-top: 20px">
              <div style="font-size: 20px; color: rgb(43, 75, 171)">
                4342.60
              </div>
              <div style="margin-top: 10px">万元</div>
              <div>合同支付</div>
            </div>
          </div>
          <div style="width: 50%; display: flex">
            <div>
              <img
                src="../../assets/img/caiwu103.png"
                alt=""
                style="width: 100px; height: 100px"
              />
            </div>
            <div style="margin-top: 20px">
              <div style="font-size: 20px; color: rgb(43, 75, 171)">342.30</div>
              <div style="margin-top: 10px">万元</div>
              <div>费用报销</div>
            </div>
          </div>
          <div style="width: 50%; display: flex">
            <div>
              <img
                src="../../assets/img/caiwu104.png"
                alt=""
                style="width: 100px; height: 100px"
              />
            </div>
            <div style="margin-top: 20px">
              <div style="font-size: 20px; color: rgb(43, 75, 171)">
                4492.50
              </div>
              <div style="margin-top: 10px">万元</div>
              <div>预算结余</div>
            </div>
          </div>
          <div style="width: 50%; display: flex">
            <div>
              <img
                src="../../assets/img/caiwu105.png"
                alt=""
                style="width: 100px; height: 100px"
              />
            </div>
            <div style="margin-top: 20px">
              <div style="font-size: 20px; color: rgb(43, 75, 171)">
                1271.32
              </div>
              <div style="margin-top: 10px">万元</div>
              <div>现金结余</div>
            </div>
          </div>
          <div style="width: 50%; display: flex">
            <div>
              <img
                src="../../assets/img/caiwu106.png"
                alt=""
                style="width: 100px; height: 100px"
              />
            </div>
            <div style="margin-top: 20px">
              <div style="font-size: 20px; color: rgb(43, 75, 171)">52.32</div>
              <div style="margin-top: 10px">万元</div>
              <div>人工成本</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px; display: flex">
      <div style="width: 70%">
        <div style="font-size: 20px; color: rgb(43, 106, 201); margin-top: -px">
          各部门预算执行情况
        </div>
        <div style="margin-top: 20px">
          <el-table :data="budgetList" style="width: 100%">
            <el-table-column prop="department" label="部门"> </el-table-column>
            <el-table-column prop="budget" label="总预算"> </el-table-column>
            <el-table-column prop="used" label="已用"> </el-table-column>
            <el-table-column prop="freeze" label="冻结"> </el-table-column>
            <el-table-column prop="usable" label="可用"> </el-table-column>
            <el-table-column prop="rate" label="比率"
              ><el-progress :percentage="69.6"></el-progress
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div style="width: 30%; margin-left: 20px">
        <div style="font-size: 20px; color: rgb(43, 106, 201)">现金流量</div>
        <div>
          <div
            style="
              width: 100%;
              display: flex;
              margin-top: 50px;
              justify-content: space-evenly;
            "
          >
            <div>
              <img
                src="../../assets/img/icon_xjll01.png"
                alt=""
                style="width: 40px; height: 40px; margin-top: 15px"
              />
            </div>
            <div>
              <div style="color: rgb(43, 106, 201)">经营活动</div>
              <div>3503万元</div>
              <div style="color: rgb(160, 165, 185); font-size: 12px">
                本月现金流量
              </div>
            </div>
            <div style="margin-top: 20px">
              <div>138523万元</div>
              <div style="color: rgb(160, 165, 185); font-size: 12px">
                本年现金流量
              </div>
            </div>
          </div>
          <hr />
          <div
            style="
              width: 100%;
              display: flex;
              margin-top: 20px;
              justify-content: space-evenly;
            "
          >
            <div>
              <img
                src="../../assets/img/icon_xjll02.png"
                alt=""
                style="width: 40px; height: 40px; margin-top: 15px"
              />
            </div>
            <div>
              <div style="color: rgb(43, 106, 201)">供应商付款</div>
              <div>4503万元</div>
              <div style="color: rgb(160, 165, 185); font-size: 12px">
                本月现金流量
              </div>
            </div>
            <div style="margin-top: 20px">
              <div>128126万元</div>
              <div style="color: rgb(160, 165, 185); font-size: 12px">
                本年现金流量
              </div>
            </div>
          </div>
          <hr />
          <div
            style="
              width: 100%;
              display: flex;
              margin-top: 20px;
              justify-content: space-evenly;
            "
          >
            <div>
              <img
                src="../../assets/img/icon_xjll03.png"
                alt=""
                style="width: 40px; height: 40px; margin-top: 15px"
              />
            </div>
            <div>
              <div style="color: rgb(43, 106, 201)">员工报销</div>
              <div>1223万元</div>
              <div style="color: rgb(160, 165, 185); font-size: 12px">
                本月现金流量
              </div>
            </div>
            <div style="margin-top: 20px">
              <div>338523万元</div>
              <div style="color: rgb(160, 165, 185); font-size: 12px">
                本年现金流量
              </div>
            </div>
          </div>
          <hr />
        </div>
      </div>
    </div>
    <div style="width: 100%; display: flex">
      <div style="width: 70%; margin-top: 20px">
        <div style="color: rgb(43, 106, 201); font-size: 20px">
          <span @click="invoice">发票管理</span>
        </div>
        <div style="margin-top: 10px">
          <el-table :data="invoiceList" style="width: 100%">
            <el-table-column
              prop="relevantProject"
              label="相关项目"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="principal" label="负责人"> </el-table-column>
            <el-table-column prop="invoiceDate" label="开票日期" width="100">
            </el-table-column>
            <el-table-column prop="invoiceNumber" label="发票号码" width="190">
            </el-table-column>
            <el-table-column prop="price" label="单价"> </el-table-column>
            <el-table-column prop="quantity" label="数量"> </el-table-column>
            <el-table-column prop="totalPrice" label="总价"> </el-table-column>
            <el-table-column prop="operation" label="操作"
              ><template slot-scope="scope">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="open(scope.row)"
                ></el-button> </template
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div style="width: 30%; margin-left: 20px; margin-top: 20px">
        <div style="color: rgb(43, 106, 201); font-size: 20px">财务提醒</div>
        <div style="display: flex; justify-content: space-between">
          <div style="display: flex; margin-top: 20px">
            <div style="margin-left: 10px">
              <img
                src="../../assets/img/yujing001.png"
                alt=""
                style="width: 50px; height: 50px"
              />
            </div>
            <div style="margin-left: 20px; margin-top: 3px">
              <div>财务提醒</div>
              <div style="color: rgb(136, 136, 136)">当前存在财务提醒</div>
            </div>
          </div>
          <div
            style="color: rgb(43, 106, 201); font-size: 20px; margin-top: 30px"
          >
            13
          </div>
        </div>
        <hr />
        <div>
          <ul style="color: red; margin-top: 20px">
            <li>
              <span style="color: black"
                >付款提醒<el-tag style="margin-left: 15px; border-radius: 12px"
                  >4</el-tag
                ></span
              >
              <ul style="font-size: 14px">
                <li>
                  <span style="color: rgb(136, 136, 136)"
                    >推森集团2021硬件采购合同付款提醒</span
                  >
                </li>
                <li>
                  <span style="color: rgb(136, 136, 136)"
                    >保洁服务合同付款提醒</span
                  >
                </li>
              </ul>
            </li>
            <li>
              <span style="color: black"
                >发票到期提醒<el-tag
                  style="margin-left: 15px; border-radius: 12px"
                  >8</el-tag
                ></span
              >
            </li>
            <li>
              <span style="color: black"
                >售票提醒<el-tag style="margin-left: 15px; border-radius: 12px"
                  >9</el-tag
                ></span
              >
            </li>
            <li>
              <span style="color: black"
                >供应商对账提醒<el-tag
                  style="margin-left: 15px; border-radius: 12px"
                  >3</el-tag
                ></span
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { selectInvoice,deleteInvoice } from "../../api/invoice";
export default {
  mounted() {
    this.selectInvoice();
  },
  data() {
    return {
      activeName: "first",
      zindex: "",
      showd:true,
      flowList: [
        {
          description:
            "合同付款申请流程-张帅扬-2019-12-12(未付款金额(转台账):-756250,已付款金额(转台账):876250)",
          name: "张帅扬/演示账号",
          date: "2019-12-12",
        },
        {
          description:
            "合同付款申请流程-张帅扬-2019-12-10(未付款金额(转台账):4999778,已付款金额(转台账):222.00)",
          name: "张帅扬/演示账号",
          date: "2019-12-10",
        },
        {
          description:
            "合同付款申请流程-张帅扬-2019-12-08(未付款金额(转台账):-1000,已付款金额(转台账):121000)",
          name: "张帅扬/演示账号",
          date: "2019-12-08",
        },
        {
          description:
            "合同付款申请流程-张帅扬-2019-12-08(未付款金额(转台账):-60000,已付款金额(转台账):180000)",
          name: "张帅扬/演示账号",
          date: "2019-12-08",
        },
      ],
      budgetList: [
        {
          department: "行政服务部",
          budget: "60000元",
          used: "25432元",
          freeze: "200元",
          usable: "58568元",
        },
        {
          department: "市场品牌部",
          budget: "180000元",
          used: "92432元",
          freeze: "0元",
          usable: "18568元",
        },
        {
          department: "EBU营销中心",
          budget: "60000元",
          used: "49432元",
          freeze: "0元",
          usable: "18568元",
        },
        {
          department: "财务服务部",
          budget: "60000元",
          used: "49432元",
          freeze: "0元",
          usable: "23512元",
        },
        {
          department: "人力资源部",
          budget: "120000元",
          used: "84432元",
          freeze: "241元",
          usable: "31568元",
        },
        {
          department: "商务服务部",
          budget: "120000元",
          used: "81432元",
          freeze: "241元",
          usable: "31568元",
        },
      ],
      invoiceList: [],
    };
  },
  methods: {
    jump() {
      this.$router.push("/finance/receipt");
    },
    invoice() {
      this.$router.push("/finance/inovico");
    },
    open(row) {
      console.log(row);
      let invoicedel = {
        id: row.id,
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.delInvoice(invoicedel);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delInvoice(id) {
      deleteInvoice(id).then((res) => {
        console.log(res);
        this.selectInvoice();
      });
    },
    selectInvoice() {
      selectInvoice().then((res) => {
        if(res.code == 200){
          console.log(res);
        this.invoiceList = res.result;
         this.showd = !this.showd
        }else{
          this.zindex = '1000'
          // alert("没有权限")
          this.showd = this.showd
        }

      });
    },
  },
};
</script>

<style scoped>
.Permissiondd{
    position: fixed;
    width: 100%;
    height: 100%;
    color: rgb(234, 240, 246);
    padding-left: 35%;
    padding-top: 20%;
    font-size: 50px;
    background-color: white ;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
ul li {
  margin-bottom: 28px;
  margin-top: 28px;
}

.el-icon-s-promotion {
  opacity: 0.5;
  font-size: 25px;
  color: #409eff;
  margin-top: 6px;
  margin-right: 10px;
}
</style>
